<template>
    <div class="card-chart">
        <div :id="id" class="chart-box"></div>
    </div>
</template>
<script>
    import {defineComponent, onMounted ,getCurrentInstance ,inject } from "vue";

    export default defineComponent({
        name: "Charts",
        props: {
            chartOptions: {
                type: Object,
                required: true,
            },
            id: {
                type: String,
            }
        },
        setup(props, {slots}) {

            // const { ctx } = getCurrentInstance(); // 打包后指向错误
            // const { proxy } = getCurrentInstance(); // vue 3.0 推荐使用 Provide/Inject
            // const echarts =  proxy.echarts
            const echarts = inject('echarts')
            onMounted(() => {
                initChart();
            });
            const initChart = () => {
                const myChart = echarts.init(document.getElementById(props.id));
                myChart.setOption(props.chartOptions);
            };
            return {initChart};
        },
    });
</script>
<style scoped>
    .chart-box {
        width: 1000px;
        height: 600px;
    }
</style>